<!-- 添加账号 -->
<template>
  <div id="AccountAdd">
    <div class="box">
      <div class="box_header">添加账号</div>
      <div class="box_body">
        <!-- 用户名 -->
        <div>
          &emsp;&emsp;
          <span class="fh">*</span>
          <span>账号</span>
          &nbsp;
          <input v-model="inputNmae" placeholder="请输入账号" class="inp">
        </div>
        <div>
          &emsp;&emsp;
          <span class="fh">*</span>
          <span>密码</span>
          &nbsp;
          <input v-model="inputPassword" placeholder="请输入密码" class="inp">
        </div>
        <!-- 用户组 -->
        <div>
          &emsp;
          <span class="fh">*</span>
          <span>用户组</span>
          &nbsp;
          <el-select v-model="upGround" placeholder="请选择活动区域" style="width: 20vw;height:2vw ;" class="selectBox">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <!-- 添加或重置 -->
        <div class="addOrResizeBox">
          <el-button type="primary" class="btn" @click="handleAdd">添加</el-button>
          <el-button class="btn" @click="handleResize">重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { fetchLoginTwenty } from '../../api/index'

const options = [
  {
    value: '普通管理员',
    label: '普通管理员',
  },
  {
    value: '超级管理员',
    label: '超级管理员',
  },
]

//配置每行的参数
const upGround = ref('');
const inputPassword = ref('');
const inputNmae = ref('');

//重置效果
function handleResize() {
  upGround.value = '';
  inputPassword.value = '';
  inputNmae.value = '';
}

//添加用户
const handleAdd = async () => {
  const res = await fetchLoginTwenty({ account: inputNmae.value, password: inputPassword.value, userGroup: upGround.value })
  alert(res.data.msg);
}
</script>

<style scoped>
.box {
  width: 85vw;
  margin-left: 1vw;
  box-shadow: 0.1vw 0.1vw 0.1vw 0.1vw #f0f0f0;
}

.box_header {
  padding: 1vw;
  font-size: 1vw;
  border-bottom: 1px solid #f0f0f0;
}

.box_body {
  padding: 1vw;

  >div {
    height: 2vw;
    padding: 1vw;
    font-size: 1vw;

    >.fh {
      color: red;
    }

    >.inp {
      width: 20vw;
      height: 2vw;
      text-indent: 0.5vw;
      font-size: 0.8vw;
      background-color: #e8f0fe;
      outline: none;
      border: 0.1vw solid #dcdfe6;
    }
  }

  >.addOrResizeBox {
    margin-left: 5.5vw;

    >.btn {
      width: 4vw;
      height: 2vw;
      font-size: 0.9vw;
    }
  }
}
</style>